<!--接口管理页面-->
<template>
    <div>
        <el-row>
            <el-col :span="22" class="toolbar marginTop10px" id="serachId">
                <el-form :model="conditionForm" ref="conditionFormRef">
                    <el-button  @click="showAddForm" size="small" type="primary" style="float:left" v-if="isShow('serviceInfo-add')">注冊</el-button>
                    <el-form-item style="float:right">
                        <el-button type="primary" size="small" @click="onSearch">&nbsp;搜索</el-button>
                    </el-form-item>
                    <el-form-item style="float:right;margin-right: 15px;">
                        <el-select v-model="conditionForm.status" size="small" placeholder="请选择">
                            <el-option label="待审核" value="0"></el-option>
                            <el-option label="审核通过" value="3"></el-option>
                            <el-option label="审核不通过" value="4"></el-option>
                            <el-option label="全部" value=""></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="float:right;margin-right: 15px">
                        <el-input v-model="conditionForm.serialNo" size="small" placeholder="接口标识"></el-input>
                    </el-form-item>
                    <el-form-item style="float:right;margin-right: 15px">
                        <el-input v-model="conditionForm.name" size="small" placeholder="接口名称"></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <el-row class="toolbar">
            <el-col :span="23" class="titleLineSymbolTwo">
                <el-table :data="resultDate.data.list" stripe style="width: 100%">
                    <el-table-column type="index" label="序号" min-width="50"></el-table-column>
                    <el-table-column prop="serialNo" label="接口标识" min-width="100"></el-table-column>
                    <el-table-column prop="name" label="接口名称" min-width="100"></el-table-column>
                    <el-table-column prop="path" label="接口地址" min-width="100"></el-table-column>
                    <el-table-column prop="publicPath" label="对外发布地址" min-width="110"></el-table-column>
                    <el-table-column prop="serviceAddress" label="服务器地址" min-width="120"></el-table-column>
                    <el-table-column prop="port" label="端口" min-width="60"></el-table-column>
                    <el-table-column prop="serviceApiInterfaceType" label="服务API接口类型" min-width="80" >
                        <template scope="scope">
                            <span v-html="formatDicTionary(scope.row.serviceApiInterfaceType,'api_type')"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="protocol" label="接口协议" min-width="80" >
                        <template scope="scope">
                            <span v-html="formatDicTionary(scope.row.protocol,'protocol_type')"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="httpMethod" label="http请求方法" min-width="110"></el-table-column>
                    <el-table-column prop="invokMethod" label="WS调用方法" min-width="100"></el-table-column>
                    <el-table-column prop="apiType" label="接口类型" min-width="80" >
                        <template scope="scope">
                            <span v-html="formatDicTionary(scope.row.apiType,'api_type')"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="apiLocation" label="服务接口所在区域" min-width="140">
                        <template scope="scope">
                            <span v-html="formatDicTionary(scope.row.apiLocation,'api_location')"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="scope" label="允许请求范围描述" min-width="140"></el-table-column>
                    <el-table-column prop="returnType" label="返回类型" min-width="80"></el-table-column>
                    <el-table-column prop="returnSample" label="返回结果示例" min-width="110"></el-table-column>
                    <el-table-column prop="serviceType" label="服务类别" min-width="100" >
                        <template scope="scope">
                            <span v-html="formatDicTionary(scope.row.serviceType,'service_type')"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="businessType" label="业务类别" min-width="100" >
                        <template scope="scope">
                            <span v-html="formatDicTionary(scope.row.businessType,'business_type')"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="description" label="技术说明" min-width="100"></el-table-column>
                    <el-table-column prop="serviceDescription" label="服务技术描述内容" min-width="100"></el-table-column>
                    <el-table-column prop="serviceArea" label="该服务对应的区域机构" min-width="160"></el-table-column>
                    <el-table-column prop="policeType" label="对应服务的警种类型" min-width="160">
                        <template scope="scope">
                            <span v-html="formatDicTionary(scope.row.policeType,'jobCategory')"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="providerId" label="提供者ID" min-width="100"></el-table-column>
                    <el-table-column prop="organization" label="管理单位名称" min-width="120"></el-table-column>
                    <el-table-column prop="version" label="版本号" min-width="100"></el-table-column>
                    <el-table-column prop="status" label="状态" min-width="100" >
                        <template scope="scope">
                            <span v-html="formatDicTionary(scope.row.status,'status_type')"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="auditTime" label="审核时间" min-width="100" :formatter="formatCommDatas"></el-table-column>
                    <el-table-column prop="isOnline" label="是否启用" min-width="80" >
                        <template scope="scope">
                            <span v-html="formatDicTionary(scope.row.isOnline,'yes_no')"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isDel" label="是否删除" min-width="80" >
                        <template scope="scope">
                            <span v-html="formatDicTionary(scope.row.isDel,'yes_no')"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" min-width="100" :formatter="formatCommDatas"></el-table-column>
                    <el-table-column prop="createById" label="创建者标识" min-width="100"></el-table-column>
                    <el-table-column prop="createByName" label="创建者名字" min-width="100"></el-table-column>
                    <el-table-column prop="modifiedTime" label="最后修改时间" min-width="120" :formatter="formatCommDatas"></el-table-column>
                    <el-table-column prop="modifiedById" label="最后修改者ID" min-width="120"></el-table-column>

                    <el-table-column label="操作" min-width="300" fixed="right">
                        <template slot-scope="scope">
                            <el-row style="margin-bottom: 5px">
                                <el-col :span="8"><el-button type="text" size="small" v-if="isShow('serviceInfo-edit') && isShowEditOrDelete(scope.row.status,'editDel')" @click="showUpdateForm(scope.$index, scope.row)">编辑</el-button></el-col>
                                <el-col :span="8"><el-button type="text" size="small" v-if="isShow('serviceInfo-resubmit') && isShowEditOrDelete(scope.row.status,'resubmit')" @click="resubmit(scope.$index, scope.row, 'updateFormRef')">重新提交</el-button></el-col>
                                <el-col :span="8"><el-button type="text" size="small" v-if="isShow('serviceInfo-delete') && isShowEditOrDelete(scope.row.status,'editDel')" @click="handleDel(scope.$index, scope.row)">删除</el-button></el-col>
                                <el-col :span="8"><el-button type="text" size="small" v-if="isShow('serviceInfo-viewDetails')" @click="showViewDetails(scope.$index, scope.row)">详情</el-button></el-col>
                                <el-col :span="8"><el-button type="text" size="small" v-if="isShowEnable('serviceInfo-enable',scope.row.status,scope.row.isOnline)" @click="changeOnLineStatus(scope.row)">启用</el-button></el-col>
                                <el-col :span="8"><el-button type="text" size="small" v-if="isShowDiscontinuation('serviceInfo-discontinuation',scope.row.status,scope.row.isOnline)" @click="changeOnLineStatus(scope.row)">停用</el-button></el-col>
                                <el-col :span="8"><el-button type="text" size="small" v-if="isShow('serviceInfo-pass') && isShowCheck(scope.row.status,'pass')" @click="audit(scope.row,'yes')">审核通过</el-button></el-col>
                                <el-col :span="8"><el-button type="text" size="small" v-if="isShow('serviceInfo-noPass') && isShowCheck(scope.row.status,'noPass')" @click="audit(scope.row,'no')">审核不通过</el-button></el-col>
                                <el-col :span="8"><el-button type="text" size="small" v-if="isShow('serviceInfo-viewHistoricalVersion') && isShowVersion('serviceInfo-viewHistoricalVersion',scope.row.status)" @click="showHistory(scope.row)" >查看版本</el-button></el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                </el-table>

                <el-col :span="23" class="toolbar marginTop10px">
                    <el-pagination layout="total, prev, pager, next, jumper" @current-change="handleCurrentPageChange"
                                :current-page="resultDate.data.pageNum"
                                :page-size="resultDate.data.pageSize" :total="resultDate.data.total">
                    </el-pagination>
                </el-col>
            </el-col>

            <!--新增界面-->
            <Modal v-model="dialogFormVisible" title="新增接口" width='50%'>
                <!--<el-dialog title="新增接口" :visible.sync="dialogFormVisible" :before-close="handleClose" width="60%" :modal-append-to-body="false">-->
                <el-card>
                <el-form :model="addForm" ref="addFormRef" :rules="formRules">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="接口标识" :label-width="formLabelWidth" prop="serialNo">
                                <el-input v-model="addForm.serialNo" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="接口名称" :label-width="formLabelWidth" prop="name" >
                                <el-input v-model="addForm.name" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="接口地址" :label-width="formLabelWidth" prop="path">
                        <el-input v-model="addForm.path" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="对外发布地址" :label-width="formLabelWidth" prop="publicPath">
                        <el-input v-model="addForm.publicPath" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="服务接口所在区域" :label-width="formLabelWidth" prop="apiLocation">
                                <!--<el-input v-model="addForm.apiLocation" auto-complete="off"></el-input>-->
                                <template>
                                    <el-select v-model="addForm.apiLocation" placeholder="请选择服务接口所在区域"  clearable filterable>
                                        <el-option
                                                v-for="item in apiLocationList"
                                                :key="item.value"
                                                :label="item.name"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="请选择提供者" :label-width="formLabelWidth" prop="providerId">
                                <el-select v-model="addForm.providerId" placeholder="请选择提供者" @change="providerIdChange(addForm)" clearable filterable>
                                    <el-option
                                            v-for="item in preloadedData.probiderList"
                                            :key="item.id"
                                            :label="item.provider"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="请选择服务器名称" :label-width="formLabelWidth" prop="hostSerialNo">
                                <el-select v-model="addForm.hostSerialNo" placeholder="请选择服务器名称" @change="hostSerialNoChange(addForm)" clearable filterable>
                                    <el-option
                                            v-for="item in providerServiceHostData"
                                            :key="item.hostSerialNo"
                                            :label="item.hostName"
                                            :value="item.hostSerialNo">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="服务器地址" :label-width="formLabelWidth" prop="serviceAddress">
                                <el-input v-model="addForm.serviceAddress" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="端口" :label-width="formLabelWidth" prop="port" type="textarea">
                                <el-input v-model="addForm.port" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="服务API接口类型" :label-width="formLabelWidth" prop="serviceApiInterfaceType" >
                                <el-radio-group v-model="addForm.serviceApiInterfaceType" >
                                    <el-radio :label="1" border>http+json</el-radio>
                                    <el-radio :label="2" border="" disabled>soap</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="接口协议" :label-width="formLabelWidth" prop="protocol">
                                <el-radio-group v-model="addForm.protocol" >
                                    <el-radio :label="1" border >标准协议</el-radio>
                                    <el-radio :label="2" border disabled>自定义协议</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="接口类型" :label-width="formLabelWidth" prop="apiType" >
                                <el-radio-group v-model="addForm.apiType" @change="changeAddFormApiType">
                                    <el-radio :label="1" border>http+json</el-radio>
                                    <el-radio :label="2" border="">soap</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="http请求方法" :label-width="formLabelWidth" prop="httpMethod" v-if="addForm.apiType==1?true:false">
                        <el-radio-group v-model="addForm.httpMethod" >
                            <el-radio label="GET" border>GET</el-radio>
                            <el-radio label="POST" border>POST</el-radio>
                            <el-radio label="DELETE" border >DELETE</el-radio>
                            <el-radio label="UPDATE" border >UPDATE</el-radio>
                            <el-radio label="PUT" border >PUT</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="WS调用方法" :label-width="formLabelWidth" prop="invokMethod" v-if="addForm.apiType==2?true:false">
                        <el-input v-model="addForm.invokMethod" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="允许请求范围描述" :label-width="formLabelWidth" prop="scope">
                        <el-input v-model="addForm.scope" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="返回类型" :label-width="formLabelWidth" prop="returnType">
                        <el-input v-model="addForm.returnType" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="返回结果示例" :label-width="formLabelWidth" prop="returnSample">
                        <el-input v-model="addForm.returnSample" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="服务类别" :label-width="formLabelWidth" prop="serviceType">
                                <el-input v-model="addForm.serviceType" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="业务类别" :label-width="formLabelWidth" prop="businessType">
                                <el-input v-model="addForm.businessType" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <el-form-item label="技术说明" :label-width="formLabelWidth" prop="description">
                        <el-input v-model="addForm.description" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="服务技术描述内容" :label-width="formLabelWidth" prop="description">
                        <el-input v-model="addForm.serviceDescription" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="该服务对应的区域机构" :label-width="formLabelWidth" prop="serviceArea">
                                <el-input v-model="addForm.serviceArea" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="对应服务的警种类型" :label-width="formLabelWidth" prop="policeType">
                                <el-select v-model="addForm.policeType" placeholder="请选择对应服务的警钟类型" clearable filterable>
                                    <el-option
                                            v-for="item in policeTypeList"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="管理单位名称" :label-width="formLabelWidth" prop="organization">
                                <el-input v-model="addForm.organization" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="版本号" :label-width="formLabelWidth" prop="version">
                                <el-input v-model="addForm.version" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="开发者用户标识" :label-width="formLabelWidth" prop="devId">
                                <el-select v-model="addForm.devId" placeholder="请选择">
                                    <el-option v-for="item in userData" :key="item.id" :label="item.name"
                                            :value="item.userId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <Row class="">
                        <el-col :span="24" class="">
                            <p slot="title">
                                <Icon type="android-more-horizontal"></Icon>
                                添加请求参数
                            </p>
                            <div class="edittable-table-height-con">
                                <can-edit-table refs="addFormParamInfosTab" v-model="addForm.paramInfos"
                                                :columns-list="[{title: '序号',type: 'index',width: 80,align: 'center'}
                                            ,{title: '参数名称',key: 'name',width: 120,align: 'center',editable: true}
                                            ,{title: '参数位置',key: 'position',width: 80,align: 'center',editable: true}
                                            ,{title: '参数类型',key: 'type',width: 120,align: 'center',editable: true}
                                            ,{title: '是否必须',key: 'isRequired',width: 80,align: 'center',editable: true}
                                            ,{title: '描述',key: 'description',width: 233,align: 'center',editable: true}
                                            ,{title: '操作',align: 'center',width: 190,key: 'handle',handle: ['edit', 'delete']}
                                            ]"></can-edit-table>
                            </div>
                        </el-col>
                    </Row>
                    <el-button type="primary" icon="el-icon-plus" @click="addParamInfoElement4AddForm()">添加参数</el-button>

                    <Row class="">
                        <el-col :span="24" class="">
                            <p slot="title">
                                <Icon type="android-more-horizontal"></Icon>
                                添加响应描述参数
                            </p>
                            <div class="edittable-table-height-con">
                                <can-edit-table refs="table3" v-model="addForm.responseInfos"
                                                :columns-list="[{title: '序号',type: 'index',width: 80,align: 'center'}
                                            ,{title: '参数名称',key: 'name',width: 120,align: 'center',editable: true}
                                            ,{title: '参数类型',key: 'type',width: 120,align: 'center',editable: true}
                                            ,{title: '描述',key: 'description',width: 233,align: 'center',editable: true}
                                            ,{title: '操作',align: 'center',width: 190,key: 'handle',handle: ['edit', 'delete']}
                                            ]"></can-edit-table>
                            </div>
                        </el-col>
                    </Row>
                    <el-button type="primary" icon="el-icon-plus" @click="addResponseInfoElement4AddForm()">添加响应描述参数</el-button>
                </el-form>
                </el-card>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('addFormRef')">确 定</el-button>
                </div>
            <!--</el-dialog>-->
            </Modal>


            <!--编辑界面-->
            <!-- <el-dialog title="编辑接口" :visible.sync="updateFormVisible" width="60%" :before-close="handleClose" :modal-append-to-body="false"> -->
            <Modal v-model="updateFormVisible" title="编辑接口" width='50%'>
                <el-card>
                <el-form :model="updateForm" ref="updateFormRef" :rules="formRules">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="接口标识" :label-width="formLabelWidth" prop="serialNo">
                                <el-input v-model="updateForm.serialNo" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="接口名称" :label-width="formLabelWidth" prop="name">
                                <el-input v-model="updateForm.name" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="接口地址" :label-width="formLabelWidth" prop="path">
                        <el-input v-model="updateForm.path" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="对外发布地址" :label-width="formLabelWidth" prop="publicPath">
                        <el-input v-model="updateForm.publicPath" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="服务接口所在区域" :label-width="formLabelWidth" prop="apiLocation">
                                <!--<el-input v-model="updateForm.apiLocation" auto-complete="off"></el-input>-->
                                <template>
                                    <el-select v-model="updateForm.apiLocation" placeholder="请选择服务接口所在区域"  clearable filterable>
                                        <el-option
                                                v-for="item in apiLocationList"
                                                :key="item.value"
                                                :label="item.name"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="请选择提供者" :label-width="formLabelWidth" prop="providerId">
                                <el-select v-model="updateForm.providerId" placeholder="请选择提供者" @change="providerIdChange(updateForm)" clearable filterable>
                                    <el-option
                                            v-for="item in preloadedData.probiderList"
                                            :key="item.id"
                                            :label="item.provider"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="请选择服务器名称" :label-width="formLabelWidth" prop="hostSerialNo">
                                <el-select v-model="updateForm.hostSerialNo" placeholder="请选择服务器名称" @change="hostSerialNoChange(updateForm)" clearable filterable>
                                    <el-option
                                            v-for="item in providerServiceHostData"
                                            :key="item.hostSerialNo"
                                            :label="item.hostName"
                                            :value="item.hostSerialNo">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="服务器地址" :label-width="formLabelWidth" prop="serviceAddress">
                                <el-input v-model="updateForm.serviceAddress" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="端口" :label-width="formLabelWidth" prop="port">
                                <el-input v-model="updateForm.port" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="服务API接口类型" :label-width="formLabelWidth" prop="protocol">
                                <el-radio-group v-model="updateForm.serviceApiInterfaceType" >
                                    <el-radio :label="1" border>http+json</el-radio>
                                    <el-radio :label="2" border disabled>soap</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="接口协议" :label-width="formLabelWidth" prop="protocol">
                                <el-radio-group v-model="updateForm.protocol" >
                                    <el-radio :label="1" border>标准协议</el-radio>
                                    <el-radio :label="2" border disabled>自定义协议</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="接口类型" :label-width="formLabelWidth" prop="apiType">
                                <el-radio-group v-model="updateForm.apiType" @change="changeUpdateFormApiType">
                                    <el-radio :label="1" border>http+json</el-radio>
                                    <el-radio :label="2" border>soap</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="http请求方法" :label-width="formLabelWidth" prop="httpMethod"  v-if="updateForm.apiType==1?true:false">
                        <el-radio-group v-model="updateForm.httpMethod" >
                            <el-radio label="GET" border>GET</el-radio>
                            <el-radio label="POST" border>POST</el-radio>
                            <el-radio label="DELETE" border >DELETE</el-radio>
                            <el-radio label="UPDATE" border >UPDATE</el-radio>
                            <el-radio label="PUT" border >PUT</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="WS调用方法" :label-width="formLabelWidth" prop="invokMethod"  v-if="updateForm.apiType==2?true:false">
                        <el-input v-model="updateForm.invokMethod" auto-complete="off"></el-input>
                    </el-form-item>                       
                    <el-form-item label="允许请求范围描述" :label-width="formLabelWidth" prop="scope">
                        <el-input v-model="updateForm.scope" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="返回类型" :label-width="formLabelWidth" prop="returnType">
                        <el-input v-model="updateForm.returnType" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="返回结果示例" :label-width="formLabelWidth" prop="returnSample">
                        <el-input v-model="updateForm.returnSample" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="服务类别" :label-width="formLabelWidth" prop="serviceType">
                                <el-input v-model="updateForm.serviceType" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="业务类别" :label-width="formLabelWidth" prop="businessType">
                                <el-input v-model="updateForm.businessType" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="技术说明" :label-width="formLabelWidth" prop="description">
                        <el-input v-model="updateForm.description" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="服务技术描述内容" :label-width="formLabelWidth" prop="description">
                        <el-input v-model="updateForm.serviceDescription" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="该服务对应的区域机构" :label-width="formLabelWidth" prop="serviceArea">
                                <el-input v-model="updateForm.serviceArea" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="对应服务的警种类型" :label-width="formLabelWidth" prop="policeType">
                                <el-select v-model="updateForm.policeType" placeholder="请选择对应服务的警钟类型" clearable filterable>
                                    <el-option
                                            v-for="item in policeTypeList"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="管理单位名称" :label-width="formLabelWidth" prop="organization">
                                <el-input v-model="updateForm.organization" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="版本号" :label-width="formLabelWidth" prop="version">
                                <el-input v-model="updateForm.version" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="开发者用户标识" :label-width="formLabelWidth" prop="devId">
                                <el-select v-model="updateForm.devId" placeholder="请选择">
                                    <el-option v-for="item in userData" :key="item.id" :label="item.name"
                                            :value="item.userId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <Row class="">
                        <el-col :span="24" class="">
                            <p slot="title">
                                <Icon type="android-more-horizontal"></Icon>
                                添加请求参数
                            </p>
                            <div class="edittable-table-height-con">
                                <can-edit-table refs="table3" v-model="updateForm.paramInfos"
                                                :columns-list="[{title: '序号',type: 'index',width: 80,align: 'center'}
                                            ,{title: '参数名称',key: 'name',width: 120,align: 'center',editable: true}
                                            ,{title: '参数位置',key: 'position',width: 80,align: 'center',editable: true}
                                            ,{title: '参数类型',key: 'type',width: 120,align: 'center',editable: true}
                                            ,{title: '是否必须',key: 'isRequired',width: 80,align: 'center',editable: true}
                                            ,{title: '描述',key: 'description',width: 233,align: 'center',editable: true}
                                            ,{title: '操作',align: 'center',width: 190,key: 'handle',handle: ['edit', 'delete']}
                                            ]"></can-edit-table>
                            </div>
                        </el-col>
                    </Row>
                    <el-button type="primary" icon="el-icon-plus" @click="addParamInfoElement4UpdateForm()">添加参数</el-button>

                    <Row class="">
                        <el-col :span="24" class="">
                            <p slot="title">
                                <Icon type="android-more-horizontal"></Icon>
                                添加响应描述参数
                            </p>
                            <div class="edittable-table-height-con">
                                <can-edit-table refs="table3" v-model="updateForm.responseInfos"
                                                :columns-list="[{title: '序号',type: 'index',width: 80,align: 'center'}
                                            ,{title: '参数名称',key: 'name',width: 120,align: 'center',editable: true}
                                            ,{title: '参数类型',key: 'type',width: 120,align: 'center',editable: true}
                                            ,{title: '描述',key: 'description',width: 233,align: 'center',editable: true}
                                            ,{title: '操作',align: 'center',width: 190,key: 'handle',handle: ['edit', 'delete']}
                                            ]"></can-edit-table>
                            </div>
                        </el-col>
                    </Row>
                    <el-button type="primary" icon="el-icon-plus" @click="addResponseInfoElement4UpdateForm()">添加响应描述参数</el-button>
                </el-form>
                </el-card>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="updateFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doUpdate('updateFormRef')">确 定</el-button>
                </div>
            </Modal>
            <!-- </el-dialog> -->

            <!-- 查看详情 -->
            <Modal v-model="detailsVisible" title="查看详情" width='50%'>
                <el-card>
                <el-form :model="updateForm" ref="updateFormRef" :rules="formRules">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="接口标识" :label-width="formLabelWidth" prop="serialNo">
                                <el-input v-model="updateForm.serialNo" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="接口名称" :label-width="formLabelWidth" prop="name">
                                <el-input v-model="updateForm.name" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="接口地址" :label-width="formLabelWidth" prop="path">
                        <el-input v-model="updateForm.path" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="对外发布地址" :label-width="formLabelWidth" prop="publicPath">
                        <el-input v-model="updateForm.publicPath" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="服务接口所在区域" :label-width="formLabelWidth" prop="apiLocation">
                                <!--<el-input v-model="updateForm.apiLocation" auto-complete="off"></el-input>-->
                                <template>
                                    <el-select v-model="updateForm.apiLocation" placeholder="请选择服务接口所在区域" clearable filterable :disabled="true">
                                        <el-option
                                                v-for="item in apiLocationList"
                                                :key="item.value"
                                                :label="item.name"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="请选择提供者" :label-width="formLabelWidth" prop="providerId">
                                <el-select v-model="updateForm.providerId" placeholder="请选择提供者" @change="providerIdChange(updateForm)" clearable filterable :disabled="true">
                                    <el-option
                                            v-for="item in preloadedData.probiderList"
                                            :key="item.id"
                                            :label="item.provider"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="请选择服务器名称" :label-width="formLabelWidth" prop="hostSerialNo">
                                <el-select v-model="updateForm.hostSerialNo" placeholder="请选择服务器名称" @change="hostSerialNoChange(updateForm)" clearable filterable :disabled="true">
                                    <el-option
                                            v-for="item in providerServiceHostData"
                                            :key="item.hostSerialNo"
                                            :label="item.hostName"
                                            :value="item.hostSerialNo">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="服务器地址" :label-width="formLabelWidth" prop="serviceAddress">
                                <el-input v-model="updateForm.serviceAddress" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="端口" :label-width="formLabelWidth" prop="port">
                                <el-input v-model="updateForm.port" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="服务API接口类型" :label-width="formLabelWidth" prop="protocol">
                                <el-radio-group v-model="updateForm.serviceApiInterfaceType" :disabled="true">
                                    <el-radio :label="1" border>http+json</el-radio>
                                    <el-radio :label="2" border disabled>soap</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="接口协议" :label-width="formLabelWidth" prop="protocol">
                                <el-radio-group v-model="updateForm.protocol" :disabled="true">
                                    <el-radio :label="1" border>标准协议</el-radio>
                                    <el-radio :label="2" border disabled>自定义协议</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="接口类型" :label-width="formLabelWidth" prop="apiType">
                                <el-radio-group v-model="updateForm.apiType" @change="changeUpdateFormApiType" :disabled="true">
                                    <el-radio :label="1" border>http+json</el-radio>
                                    <el-radio :label="2" border>soap</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="http请求方法" :label-width="formLabelWidth" prop="httpMethod"  v-if="updateForm.apiType==1?true:false">
                        <el-radio-group v-model="updateForm.httpMethod" :disabled="true">
                            <el-radio label="GET" border>GET</el-radio>
                            <el-radio label="POST" border>POST</el-radio>
                            <el-radio label="DELETE" border >DELETE</el-radio>
                            <el-radio label="UPDATE" border >UPDATE</el-radio>
                            <el-radio label="PUT" border >PUT</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="WS调用方法" :label-width="formLabelWidth" prop="invokMethod"  v-if="updateForm.apiType==2?true:false">
                        <el-input v-model="updateForm.invokMethod" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>                       
                    <el-form-item label="允许请求范围描述" :label-width="formLabelWidth" prop="scope">
                        <el-input v-model="updateForm.scope" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="返回类型" :label-width="formLabelWidth" prop="returnType">
                        <el-input v-model="updateForm.returnType" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="返回结果示例" :label-width="formLabelWidth" prop="returnSample">
                        <el-input v-model="updateForm.returnSample" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="服务类别" :label-width="formLabelWidth" prop="serviceType">
                                <el-input v-model="updateForm.serviceType" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="业务类别" :label-width="formLabelWidth" prop="businessType">
                                <el-input v-model="updateForm.businessType" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="技术说明" :label-width="formLabelWidth" prop="description">
                        <el-input v-model="updateForm.description" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="服务技术描述内容" :label-width="formLabelWidth" prop="description">
                        <el-input v-model="updateForm.serviceDescription" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="该服务对应的区域机构" :label-width="formLabelWidth" prop="serviceArea">
                                <el-input v-model="updateForm.serviceArea" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="对应服务的警种类型" :label-width="formLabelWidth" prop="policeType">
                                <el-select v-model="updateForm.policeType" placeholder="请选择对应服务的警钟类型" clearable filterable :disabled="true">
                                    <el-option
                                            v-for="item in policeTypeList"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="管理单位名称" :label-width="formLabelWidth" prop="organization">
                                <el-input v-model="updateForm.organization" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="版本号" :label-width="formLabelWidth" prop="version">
                                <el-input v-model="updateForm.version" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="开发者用户标识" :label-width="formLabelWidth" prop="devId">
                                <el-select v-model="updateForm.devId" placeholder="请选择" :disabled="true">
                                    <el-option v-for="item in userData" :key="item.id" :label="item.name"
                                            :value="item.userId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <Row class="">
                        <el-col :span="24" class="">
                            <p slot="title">
                                <Icon type="android-more-horizontal"></Icon>
                                添加请求参数
                            </p>
                            <div class="edittable-table-height-con">
                                <can-edit-table refs="table3" v-model="updateForm.paramInfos"
                                                :columns-list="[{title: '序号',type: 'index',width: 80,align: 'center'}
                                            ,{title: '参数名称',key: 'name',width: 120,align: 'center',editable: true}
                                            ,{title: '参数位置',key: 'position',width: 80,align: 'center',editable: true}
                                            ,{title: '参数类型',key: 'type',width: 120,align: 'center',editable: true}
                                            ,{title: '是否必须',key: 'isRequired',width: 80,align: 'center',editable: true}
                                            ,{title: '描述',key: 'description',width: 350,align: 'center',editable: true}
                                            //,{title: '操作',align: 'center',width: 190,key: 'handle',handle: ['edit', 'delete']}
                                            ]"></can-edit-table>
                            </div>
                        </el-col>
                    </Row>
                    <el-button type="primary" icon="el-icon-plus" @click="addParamInfoElement4UpdateForm()" style="display:none">添加参数</el-button>

                    <Row class="">
                        <el-col :span="24" class="">
                            <p slot="title">
                                <Icon type="android-more-horizontal"></Icon>
                                添加响应描述参数
                            </p>
                            <div class="edittable-table-height-con">
                                <can-edit-table refs="table3" v-model="updateForm.responseInfos"
                                                :columns-list="[{title: '序号',type: 'index',width: 80,align: 'center'}
                                            ,{title: '参数名称',key: 'name',width: 200,align: 'center',editable: true}
                                            ,{title: '参数类型',key: 'type',width: 200,align: 'center',editable: true}
                                            ,{title: '描述',key: 'description',width: 350,align: 'center',editable: true}
                                            //,{title: '操作',align: 'center',width: 190,key: 'handle',handle: ['edit', 'delete']}
                                            ]"></can-edit-table>
                            </div>
                        </el-col>
                    </Row>
                    <el-button type="primary" icon="el-icon-plus" @click="addResponseInfoElement4UpdateForm()" style="display:none">添加响应描述参数</el-button>
                </el-form>
                </el-card>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="detailsVisible = false">关 闭</el-button>
                </div>
            </Modal>

            <!-- 历史版本弹窗 start -->
            <!--历史版本界面-->
            <Modal v-model="historyFormVisible" title="历史版本" width='50%' >
                <el-card>
                <row>
                    <el-col :span="24">
                        <el-table :data="historyResult.list" stripe style="width: 100%">
                            <el-table-column prop="serviceSerialNo" label="接口唯一标识" min-width="100"></el-table-column>
                            <el-table-column prop="version" label="版本号" min-width="100"></el-table-column>
                            <el-table-column prop="createById" label="创建人标识" min-width="100"></el-table-column>
                            <el-table-column prop="createTime" label="创建时间" min-width="100" :formatter="formatCommDatas"></el-table-column>
                            <el-table-column prop="operating" label="操作" min-width="100" >
                                <template slot-scope="scope">
                                    <el-button size="small" @click="showChecketaileds(scope.row)" >查看详细</el-button>
                                </template>
                            </el-table-column>                            <!--<el-table-column prop="json" label="json" min-width="100"></el-table-column>-->
                        </el-table>
                    </el-col>
                    <el-col :span="24" class="toolbar">
                        <el-pagination layout="total, prev, pager, next, jumper" @current-change="handleCurrentHistoryPageChange"
                                    :current-page="historyResult.pageNum"
                                    :page-size="historyResult.pageSize" :total="historyResult.total">
                        </el-pagination>
                    </el-col>
                </row>
                </el-card>
            </Modal>
            <!-- 历史版本弹窗 end -->

            <!-- 历史版本中的查看详细弹窗 start -->
            <!--新增界面-->            <!--新增界面-->

            <Modal v-model="checketaileds" title="查看详细" width='60%' >
                <row>
                <el-form :model="checketailedsForm"  :rules="formRules">
                    <el-form-item label="name" :label-width="formLabelWidth" prop="name_check">
                        <el-input v-model="checketailedsForm.name" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="path" :label-width="formLabelWidth" prop="path_check">
                        <el-input v-model="checketailedsForm.path" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="isDel" :label-width="formLabelWidth" prop="isDel_check">
                        <el-input v-model="checketailedsForm.isDel" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="status" :label-width="formLabelWidth" prop="status_check">
                        <el-input v-model="checketailedsForm.status" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="apiType" :label-width="formLabelWidth" prop="apiType_check">
                        <el-input v-model="checketailedsForm.apiType" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="version" :label-width="formLabelWidth" prop="version_check">
                        <el-input v-model="checketailedsForm.version" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="isOnline" :label-width="formLabelWidth" prop="isOnline_check">
                        <el-input v-model="checketailedsForm.isOnline" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="protocol" :label-width="formLabelWidth" prop="protocol_check">
                        <el-input v-model="checketailedsForm.protocol" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="serviceApiInterfaceType" :label-width="formLabelWidth" prop="apiType_check">
                        <el-input v-model="checketailedsForm.serviceApiInterfaceType" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="serialNo" :label-width="formLabelWidth" prop="serialNo_check">
                        <el-input v-model="checketailedsForm.serialNo" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="httpMethod" :label-width="formLabelWidth" prop="httpMethod_check">
                        <el-input v-model="checketailedsForm.httpMethod" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="policeType" :label-width="formLabelWidth" prop="policeType_check">
                        <el-input v-model="checketailedsForm.policeType" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="providerId" :label-width="formLabelWidth" prop="providerId_check">
                        <el-input v-model="checketailedsForm.providerId" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="publicPath" :label-width="formLabelWidth" prop="publicPath_check">
                    <el-input v-model="checketailedsForm.publicPath" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="returnType" :label-width="formLabelWidth" prop="returnType_check">
                        <el-input v-model="checketailedsForm.returnType" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="apiLocation" :label-width="formLabelWidth" prop="apiLocation_check">
                        <el-input v-model="checketailedsForm.apiLocation" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="serviceType" :label-width="formLabelWidth" prop="serviceType_check">
                        <el-input v-model="checketailedsForm.serviceType" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="businessType" :label-width="formLabelWidth" prop="businessType_check">
                        <el-input v-model="checketailedsForm.businessType" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="responseInfos" :label-width="formLabelWidth" prop="responseInfos_check">
                        <el-input v-model="checketailedsForm.responseInfos" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="serviceAddress" :label-width="formLabelWidth" prop="serviceAddress_check">
                        <el-input v-model="checketailedsForm.serviceAddress" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>

                    <Row class="">
                        <el-col :span="24" class="">
                            <div class="edittable-table-height-con">
                                <can-edit-table refs="table3" v-model="checketailedsForm.paramInfos"
                                                :columns-list="[{title: 'name',key: 'name',width: 120,align: 'center',editable: true}
                                            ,{title: 'type',key: 'type',width: 80,align: 'center',editable: true}
                                            ,{title: 'position',key: 'position',width: 120,align: 'center',editable: true}
                                            ,{title: 'serviceId',key: 'serviceId',width: 80,align: 'center',editable: true}
                                            ,{title: 'isRequired',key: 'isRequired',width: 233,align: 'center',editable: true}
                                            ,{title: 'description',key: 'description',width: 233,align: 'center',editable: true}
                                            ]"></can-edit-table>
                            </div>
                        </el-col>
                    </Row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="checketaileds = false">确 定</el-button>
                </div>
                </row>
            </Modal>
            <!-- 历史版本中的查看详细弹窗 end -->
        </el-row>
    </div>
</template>
<script>
    import canEditTable from './components/canEditTable.vue';


    import {
        dict_getRootListByType,
        dict_getSubNodeListByPid,
        ser_add,
        ser_changeOnLineStatus,
        ser_check,
        ser_del,
        ser_searchByCondition,
        ser_update,req_searchByCondition,
        serHis_searchByCondition,
        pro_searchByCondition,
        pro_serverInformationSearch,
        req_seachUserByCurrent
    } from '../api/api.js';
    import utils from '../api/utils.js';
    import Card from "iview/src/components/card/card";

    export default {
        components: {
            Card,
            canEditTable
        },
        data() {
            return {
                userData:[],
                resultDate: {data:{total:0, pageNum: 0,list:[]}},
                dialogFormVisible: false,
                formLabelWidth: '155px',// 新增界面label大小
                addForm: {
                    serviceApiInterfaceType:1,
                    apiType:1,
                    paramInfos: [],
                    responseInfos:[],
                    protocol:1,
                    apiLocation:"2",
                    hostSerialNo:"",
                },
                providerServiceHostData: [], //提供者服务器信息
                preloadedData:{probiderList:[]},// 预加载的数据，选择接口提供者
                updateForm: {
                    paramInfos: [],
                    responseInfos:[],
                },// ---------  更新
                updateFormVisible: false,
                historyFormVisible: false,
                checketaileds:false,
                checketailedsForm: {
                    paramInfos: [],
                    responseInfos:[],
                },// ---------  更新
                historyResult:{total:0, pageNum: 0},
                currHistoryConditon:{},
                //表单校验规则
                formRules: { // 新增界面校验规则
                    serialNo: [
                        {required: true, message: '请输入接口标识', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入接口名称', trigger: 'blur'}
                    ],
                    path: [
                        {required: true, message: '请输入接口地址', trigger: 'blur'}
                    ],
                    publicPath: [
                        {required: true, message: '请输入对外发布地址', trigger: 'blur'}
                    ],
                    hostSerialNo: [
                        {required: true, message: '请选择服务器名称', trigger: 'blur'}
                    ],
                    serviceAddress: [
                        {required: true, message: '请输入服务器地址', trigger: 'blur'}
                    ],
                    devId: [
                        {required: true, message: '请选择开发者用户标识', trigger: 'blur'}
                    ],
                    port: [
                        {required: true, message: '请输入端口', trigger: 'blur'}
                        ,{validator(rule, value, callback, source, options) {
                            var errors = [];
                            if (!/^[0-9]+$/.test(value)) {
                                callback('端口必须为数字值....');
                            }
                            callback(errors)// 这局不写会不执行
                        }, trigger: 'blur'}
                    ],
                    protocol: [
                        {required: true, message: '请选择接口协议', trigger: 'blur'}
                    ],
                    // httpMethod 和 invokMethod 设置默认httpMethod 必须选择
                    httpMethod: [
                        { required: true, message: '请选择http请求方法', trigger: 'blur' }
                    ],
                    invokMethod: [
                        { required: false, message: '请输入WS调用方法', trigger: 'blur' }
                    ],
                    apiType: [
                        {required: true, message: '请选择接口类型', trigger: 'blur'}
                    ],
                    apiLocation: [
                        {required: true, message: '请输入服务接口所在区域', trigger: 'blur'}
                    ],
//                    scope: [
//                        { required: true, message: '请输入允许请求范围的文字描述', trigger: 'blur' }
//                    ],
//                    returnType: [
//                        { required: true, message: '请输入返回类型', trigger: 'blur' }
//                    ],
//                    returnSample: [
//                        { required: true, message: '请输入返回结果示例', trigger: 'blur' }
//                    ],
//                    serviceType: [
//                        { required: true, message: '请输入服务类别', trigger: 'blur' }
//                    ],
//                    businessType: [
//                        { required: true, message: '请输入业务类别', trigger: 'blur' }
//                    ],
//                    description: [
//                        { required: true, message: '请输入技术说明', trigger: 'blur' }
//                    ],
//                    serviceArea: [
//                        { required: true, message: '请输入该服务对应的区域机构', trigger: 'blur' }
//                    ],
                   policeType: [
                       { required: true, message: '请选择对应服务的警种类型', trigger: 'blur' }
                   ],
                    providerId: [
                        {required: true, message: '请选择提供者', trigger: 'blur'}
                    ],
//                    organization: [
//                        { required: true, message: '请输入管理单位名称', trigger: 'blur' }
//                    ],
                    version: [
                        {required: true, message: '请输入版本号', trigger: 'blur'}
                    ],
                },
                // 查询条件
                conditionForm: {status:"0",serialNo:"", name:"", searchType: "", keyword: "", pageSize: 5 , policeType:"" },
                searchTypeOptions: [{
                    value: 'name',
                    label: '接口名称'
                }, {
                    value: 'serialNo',
                    label: '接口标识'
                }, {
                    value: 'organization',
                    label: '管理单位名称'
                }, {
                    value: 'all',
                    label: '全部',
                }],


                treeDefaultProps: {
                    label: 'name',
                    isLeaf: "isDirectory"
                },
                // 是否非第一次加载页面
                isNoFirstLoad:false,
                apiLocationList: [{}],// 接口所在区域 列表
                policeTypeList:[],// 对应服务的警种类型 列表

                detailsVisible: false
            };
        },
        methods: {
            isShow: function (resource) { //资源权限管理
                return utils.apiResourcePermissions(resource);
            },
            isShowEditOrDelete: function (status,type) { //资源权限管理 根据审核情况是否显示（编辑/删除）
                return utils.apiIsShowEditOrDelete(status,this.roleId,type);
            },
            isShowCheck: function(status,type){ // 资源权限管理 根据审核情况是否显示（审核）
                return utils.apiIsShowCheck(status,this.roleId,type)
            },
            isShowEnable(resource,status,isOnline){
                if(this.isShow(resource) && status === 3 && isOnline === 0){ // 资源是否有权限,审核通过,是否已使用
                    return true;
                }
                return false;
            },
            isShowDiscontinuation(resource,status,isOnline){
                if(this.isShow(resource) && status === 3 && isOnline !=0){ // 资源是否有权限,审核通过,是否已使用
                    return true;
                }
                return false;
            },
            isShowVersion(resource,status){
                if(this.isShow(resource) && status === 3){
                    return true;
                }
                return false;
            },
            loadNode(node, resolve) {
                let _this = this
                if (node.level === 0) {// 第一次加载页面，树没数据就是==0
                    // dict_getRootListByType({"type":"jobCategory","isPageAble":false})
                    //     .then(res => {
                    //         resolve(res.data.data);
                    //     }).catch(function (error) {
                    //     _this.$message.warning('系统异常 ');
                    // });

                    resolve(utils.getDictDatasByType("jobCategory"))
                    return;
                }
                if(node.data.id>0){
                    // dict_getSubNodeListByPid({"pid":node.data.id,"isPageAble":false})
                    //     .then(res => {
                    //         resolve(res.data.data);
                    //     }).catch(function (error) {
                    //     _this.$message.warning('系统异常 ');
                    // });
                    resolve(utils.getDictDatasByPid(node.data.id))
                    return;
                }
            },
            handleCurrentPageChange: function (currentPage) {// 翻页动作
                this.currentPage = currentPage;
                this.onSearch();// 翻页后刷新页面数据
            },
            handleCurrentHistoryPageChange: function (currentPage) {// 翻页动作
                this.currentPage = currentPage;
                // {serviceSerialNo:row.serialNo,pageNum:1}
                this.searchHistorySerList({serviceSerialNo:this.currHistoryConditon.serviceSerialNo,pageNum:currentPage});// 翻页后刷新页面数据
            },
            handleClose(done) { // 新增界面关闭事件
                this.$confirm('确认关闭？', "提示").then(_ => {
                    done();
                }).catch(_ => {
                });
            },
            providerIdChange(_form,type){ // 选择提供者改变方法
                if(type != 1){
                    _form['hostSerialNo'] = "";
                    _form['serviceAddress'] = "";
                }
                let serialNo = "";
                this.providerServiceHostData = [];
                this.preloadedData.probiderList.forEach(obj => {
                    if(obj.id === _form.providerId){
                        serialNo = obj.serialNo;
                    }
                });
                let _this = this;
                let params = {
                    providerSerialNo: serialNo
                }
                pro_serverInformationSearch(params).then(res => {
                    _this.providerServiceHostData = res.data.data.list;
                }).catch(function (error) {
                    console.log(error);
                    _this.$message.warning('系统异常 ');
                });
            },
            hostSerialNoChange(_form){
                let _this = this;
                this.providerServiceHostData.forEach(element => {
                    if(element.hostSerialNo === _form.hostSerialNo){
                        _form['serviceAddress'] = element.hostIp;
                    }
                });
            },
            submitForm(formName) { // 新增界面提交方法
                let params = Object.assign({}, this.$refs[formName]._props.model);
                params.paramInfos = params.paramInfos.filter(function(item){
                    if(item.name){
                        return item;
                    }

                })

                params.responseInfos = params.responseInfos.filter(function(item){
                    if(item.name){
                        return item;
                    }

                })
                var _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            ser_add(params).then(res => {
                                console.log(res.data.msg);
                                _this.$message.success(res.data.msg);
                                if (res.data.code == 'S100101') {
                                    _this.addForm = {apiType:1, paramInfos: [], responseInfos:[], protocol:1,}
                                    _this.dialogFormVisible=false;
                                    _this.onSearch();
                                }else{
                                    _this.dialogFormVisible=false;
                                }
                            }).catch(err => {
                                this.$message.error("系统异常");
                                console.log(err);
                            });
                        });
                    }else{console.log("校验不通过！！！")}

                });

            },
            seachUserByCurrent(){
                let roleId = "";
                if(utils.isEmpty(localStorage.apiPermission)){
                    return;
                }
                let arr = JSON.parse(localStorage.apiPermission);
                arr.forEach(obj => {
                    roleId = obj.roleId;
                    return
                });
                this.roleId = roleId;
                let params = {
                    roleId: roleId
                };
                req_seachUserByCurrent(params)
                    .then(res => {
                        this.userData = res.data.data;
                    }).catch(function (error) {
                    console.log(error);
                    _this.$message.warning('系统异常 ');
                });
            },
            // 查询
            onSearch(){
                var _this = this;
                //  todo  和上面的tree对应（tree注释了）
                // if(this.isNoFirstLoad){// todo 这里把树里边的查询条件取出来 赋值到 policeType 传到后台
                //     console.log(this.$refs.tree.getCheckedNodes());
                //     console.log(this.$refs.tree.getCheckedKeys());
                //     console.log("?,.")
                //     _this.conditionForm.policeType=this.$refs.tree.getCheckedKeys();
                // }
                this.isNoFirstLoad=true;
                _this.conditionForm.pageNum = _this.currentPage;
                _this.conditionForm.roleId = _this.roleId;
                ser_searchByCondition(_this.conditionForm)
                    .then(res => {
                        _this.resultDate = res.data;
                    }).catch(function (error) {
                    console.log(error);
                    this.$message.warning('系统异常 ');
                });
            },
            resetChecked() { // 清空所有选择的节点
                this.$refs.tree.setCheckedKeys([]);
            },
            //删除
            handleDel (index, row) { // 数据项删除操作
                this.$confirm('是否删除当前该记录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    ser_del(row.id).then((res) => {
                        if (res.data.code == 'S100101') {
                            this.$message.success('删除成功!');
                            this.onSearch();
                        } else {
                            this.$message.warning('删除失败! ' + res.data.msg);
                            this.onSearch();
                        }
                    }).catch((res) => {
                        this.$message.error('删除失败!');
                    });
                })
            },
            showUpdateForm(index, row){
                this.updateForm = {};
                this.updateForm = Object.assign({}, row);//todo 需要删除子对象
                this.updateForm.apiLocation = this.updateForm.apiLocation+"";// 犹豫字典是字符串类型，所以这里也转为字符串
                this.updateForm.paramInfos.push({});// 临时解决 添加参数项的操作按钮消失问题 todo
                this.updateForm.paramInfos.pop();
                this.updateForm.responseInfos.push({});// 临时解决 添加参数项的操作按钮消失问题 todo
                this.updateForm.responseInfos.pop();
                this.providerIdChange(this.updateForm,1);
                let _this = this;
                setTimeout(function(){
                    _this.updateFormVisible = true;
                },500)
                
            },
            showViewDetails(index, row){
                this.updateForm = {};
                this.detailsVisible = true;
                this.updateForm = Object.assign({}, row);
            },
            showAddForm(){
                this.dialogFormVisible = true;
                this.providerServiceHostData = [];
                // this.addForm.providerId = "";
                this.addForm.hostSerialNo = "";
                this.addForm.serviceAddress = "";
                this.fefreshAddFormPage()
            },
            fefreshAddFormPage(){
                this.addForm.paramInfos.push({});// 临时解决 添加参数项的操作按钮消失问题 todo
                this.addForm.paramInfos.pop();
                this.addForm.responseInfos.push({});// 临时解决 添加参数项的操作按钮消失问题 todo
                this.addForm.responseInfos.pop();
            },
            doUpdate(formName){
                let params = Object.assign({}, this.$refs[formName]._props.model);
                params.paramInfos = params.paramInfos.filter(function(item){
                    if(item.name){
                        return item;
                    }

                })

                params.responseInfos = params.responseInfos.filter(function(item){
                    if(item.name){
                        return item;
                    }

                })

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            ser_update(params).then((res) => {
                                if (res.data.code == 'S100101') {
                                    this.$message.success('更新成功!');
                                    this.onSearch();
                                } else {
                                    this.$message.warning('更新失败! ' + res.data.msg);
                                    this.onSearch();
                                }
                            }).catch((res) => {
                                this.$message.error('更新失败!');
                            });
                            this.updateFormVisible = false;
                        });
                    }
                });
            },
            resubmit(index, row, formName){
                let _this = this
                this.updateForm = Object.assign({}, row);
                this.updateForm.status = 2;
                ser_update(this.updateForm).then((res) => {
                    if (res.data.code == 'S100101') {
                        _this.$message.success('重新提交成功!');
                        _this.onSearch();
                    } else {
                        _this.$message.warning('重新提交失败! ' + res.data.msg);
                        _this.onSearch();
                    }
                }).catch((err) => {
                    _this.$message.error('重新提交失败!');
                });
            },
            changeOnLineStatus(row){// 上下线
                ser_changeOnLineStatus({id:row.id}).then((res)=>{
                    if (res.data.code == 'S100101') {
                        this.$message.success(res.data.msg);
                        this.onSearch();
                    } else {
                        this.$message.warning('操作失败! ' + res.data.msg);
                        this.onSearch();
                    }
                }).catch((err)=>{
                    this.$message.error('操作失败!');
                    console.log('操作失败：'+err);
                });
            },
            audit(row,yesOrNo){// 审核
                let status ;
                if(yesOrNo=='yes'){
                    status=3;
                }else if(yesOrNo=='no'){
                    status=4
                }else{this.$message.error("异常操作!!!");return false;}
                ser_check({id:row.id,status:status}).then((res)=>{
                    if (res.data.code == 'S100101') {
                        this.$message.success(res.data.msg);
                        this.onSearch();
                    } else {
                        this.$message.warning('操作失败! ' + res.data.msg);
                        this.onSearch();
                    }
                }).catch((err)=>{
                    this.$message.error('审核失败!');
                    console.log('审核失败：'+err);
                });
            },
            //历史版本
            showHistory(row){
                var _this = this;
                this.currHistoryConditon.serviceSerialNo = row.serialNo;
                this.searchHistorySerList({serviceSerialNo:row.serialNo,pageNum:1});
            },

            searchHistorySerList(param){
                var _this = this;
                serHis_searchByCondition(param).then((res)=>{
                    if (res.data.code == 'S100101') {
                        console.log("历史列表:")
                        console.log(res)
                        _this.historyResult = res.data.data;
                        _this.historyFormVisible=true;
                    } else {
                        this.$message.warning('获取历史版本列表失败! ' + res.data.msg);
                    }
                }).catch((err)=>{
                    this.$message.error('获取历史版本列表失败!');
                    console.log('获取历史版本列表失败：'+err);
                });
            },

            showChecketaileds(row){
                this.checketaileds = true;
                var par = JSON.parse(row.json);
                this.checketailedsForm = {};
                this.checketailedsForm = Object.assign({}, par);//todo 需要删除子对象
                console.log(checketailedsForm);
            },



            formatCommDatas(row, column){
                return utils.formatCommDatas(row, column);
            },
            addParamInfoElement4AddForm(){// 新增表单-新增参数子对象
                this.addForm.paramInfos.push({});
                console.log(this.addForm)
                this.showAddForm();
                // todo  添加一行的时候应该进入编辑状态
//                editButton(this,this.render,this.addForm.paramInfos[this.addForm.paramInfos.length-1],this.addForm.paramInfos.length-1);//(vm, h, currentRow, index)  addFormParamInfosTab
            },
            addResponseInfoElement4AddForm(){// 新增表单-新增响应参数子对象
                this.addForm.responseInfos.push({});
                console.log(this.addForm)
                this.showAddForm();
            },
            addParamInfoElement4UpdateForm(){// 编辑表单-新增参数子对象
                this.updateForm.paramInfos.push({});
                console.log(this.updateForm)
            },
            addResponseInfoElement4UpdateForm(){// 编辑表单-新增响应参数子对象
                this.updateForm.responseInfos.push({});
                console.log(this.updateForm)
            },
            changeAddFormApiType(val){// 新增表单选择接口类型
                console.log(this.addForm.apiType);
                if(this.addForm.apiType==1){// http+json 清空另一种类型参数
                    this.addForm.invokMethod=null;
                    // 修改必填项
                    this.formRules.httpMethod[0].required=true;
                    this.formRules.invokMethod[0].required=false;
                }else if(this.addForm.apiType==2){// soap  清空另一种类型参数
                    this.addForm.httpMethod=null;
                    // 修改必填项
                    this.formRules.invokMethod[0].required=true;
                    this.formRules.httpMethod[0].required=false;
                }else{
                    this.$message.error("浏览器异常，请刷新页面")
                }
            },
            changeUpdateFormApiType(val){// 编辑表单选择接口类型
                console.log(this.updateForm.apiType);
                if(this.updateForm.apiType==1){// http+json 清空另一种类型参数
                    this.updateForm.invokMethod=null;
                    // 修改必填项
                    this.formRules.httpMethod[0].required=true;
                    this.formRules.invokMethod[0].required=false;
                }else if(this.updateForm.apiType==2){// soap  清空另一种类型参数
                    this.updateForm.httpMethod=null;
                    // 修改必填项
                    this.formRules.invokMethod[0].required=true;
                    this.formRules.httpMethod[0].required=false;
                }else{
                    this.$message.error("浏览器异常，请刷新页面")
                }
            },
            loadData(){//加载 请求者数据 和 接口数据   preloadedData.requesterList:{},preloadedData.serviceList:{}
                var _this = this
                // 加载未删除、已审核的数据
                // req_searchByCondition({isDel:0,status:3,pageSize:99999})
                // debugger
                pro_searchByCondition({isDel:0,status:3,pageSize:99999})
                    .then(res => {
                        if(res.data.code&&res.data.code=='S100101'){
                            _this.preloadedData.probiderList = res.data.data.list;
                            console.log(">>>>>>>>>>>>>>>>>>>>>>")
                            console.log(_this.preloadedData)
                        }else{
                            console.log(res.data)
                            this.$message.error('加载数据异常!');
                        }
                    }).catch(function (error) {
                    console.log("系统异常:"+error);
                    this.$message.warning('系统异常 ');
                });
            },
            formatDicTionary(value,type){
                return utils.formatDicTionary(value,type);
            },


        },
        computed: {
            // method1: function(){
            //     return  getCheckedNodes()
            // }
        },
        created() {

        },
        watch:{
            addForm(a,b){// 解决‘添加子对象’操作按钮不显示bug，重新刷新对象
                try{
                    this.fefreshAddFormPage();
                }catch(e){console.log(e)}

            },
        },
        mounted(){
            this.seachUserByCurrent();
            this.onSearch();
            this.loadData();// 预加载新增表单的下拉列表数据
            this.apiLocationList=utils.getDictDatasByType("api_location");// 接口所在区域 列表
            this.policeTypeList=utils.getDictDatasByType("jobCategory");// 警钟列表
            console.log(this.apiLocationList)
            console.log(this.policeTypeList)




        },



    };


</script>
 
 
